<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>iphone12</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			overflow: hidden;
		}

		.box {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			display: flex;
			justify-content: center;
			align-items: center;
			animation: rotate 6s linear infinite;
		}

		@keyframes rotate {
			0% {
				transform: rotateY(0deg) rotateX(0deg) scale3d(.85, .85, .85);
			}

			100% {
				transform: rotateY(360deg) rotateX(0deg) scale3d(.85, .85, .85);
			}
		}

		/** 背后 */
		.back {
			position: absolute;
			width: 307px;
			height: 633px;
			background: linear-gradient(65deg, rgb(26, 53, 64) 20%, rgb(37, 63, 76) 50%, rgb(117, 140, 154) 120%);
			border-radius: 46px;
			transform-style: preserve-3d;
			border: solid 2px rgb(76, 100, 117);
			box-shadow: inset 0 0 3px 1px;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: translateZ(-15px) rotateY(180deg);
		}

		.camera-group {
			position: absolute;
			left: 20px;
			top: 20px;
			width: 128px;
			height: 128px;
			background: linear-gradient(70deg, rgb(26, 53, 64) 46%, rgb(55, 81, 93) 46%);
			border-radius: 30px;
			transform-style: preserve-3d;
			border: solid 2px rgb(76, 100, 117);
			box-shadow: inset 0 0 3px 1px;
		}

		.camera {
			position: absolute;
			width: 46px;
			height: 46px;
			border-radius: 50%;
			background: radial-gradient(#444 1px, rgb(0, 54, 161) 4px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);
			border: solid 4px rgb(45, 72, 83);
			box-shadow: 0 0 3px, inset 0 0 2px;
		}

		.camera1 {
			left: 6px;
			top: 6px;
		}

		.camera2 {
			left: 6px;
			bottom: 6px;
		}

		.camera3 {
			top: 50%;
			transform: translateY(-50%);
			right: 6px;
			bottom: 6px;
		}

		.camera4 {
			position: absolute;
			right: 20px;
			top: 6px;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background: radial-gradient(rgb(214, 200, 217) 2px, rgb(214, 200, 197) 9px, rgb(45, 72, 83) 14px);
			box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
		}

		.camera5 {
			position: absolute;
			right: 20px;
			bottom: 6px;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			background: radial-gradient(#333 1px, rgb(14, 27, 29) 5px, rgb(6, 6, 6) 18px, rgb(40, 50, 57) 22px);
			box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
		}

		.camera6 {
			position: absolute;
			right: 10px;
			bottom: 30px;
			width: 3px;
			height: 3px;
			border-radius: 50%;
			background: rgb(6, 6, 6);
			box-shadow: 0 0 2px rgb(45, 72, 83), inset 0 0 2px rgb(45, 72, 83);
		}

		.logo-box {
			position: absolute;
		}

		.logo {
			position: absolute;
			top: -30px;
			left: -30px;
			width: 145px;
			height: 220px;
			border-radius: 80% 70% 60% 90%/50% 50% 60% 100%;
			background: linear-gradient(70deg, rgb(26, 53, 64) 70%, rgb(55, 81, 93) 50%);
			transform: scale(.28);
			transform-origin: 0 0;
		}

		.logo::after {
			position: absolute;
			content: '';
			left: 97px;
			width: 145px;
			height: 220px;
			border-radius: 70% 80% 90% 60% /50% 50% 100% 60%;
			background: linear-gradient(70deg, rgb(26, 53, 64) 27%, rgb(55, 81, 93) 27%);
			-webkit-mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);
			mask-image: radial-gradient(circle at 110% 38%, #0000 60px, #000 20px);

		}

		.logo::before {
			position: absolute;
			top: -70px;
			left: 117px;
			width: 60px;
			height: 68px;
			background-color: rgb(55, 81, 93);
			content: '';
			border-radius: 100% 0;
		}

		/** 背后结束*/
		/** 正面 */

		.front {
			position: absolute;
			width: 307px;
			height: 633px;
			background: rgb(239, 221, 197);
			border-radius: 46px;
			transform-style: preserve-3d;
			border: solid 2px rgb(76, 100, 117);
			box-shadow: inset 0 0 0 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			transform: translateZ(15px);
		}

		.front::after {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 46px;
			box-shadow: inset 0 0 0 10px;
			content: '';
		}

		.circle1 {
			position: absolute;
			width: 196px;
			height: 196px;
			background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
			border-radius: 50%;
			box-shadow: inset -10px 15px 50px rgb(255, 248, 147);
		}

		.circle2 {
			position: absolute;
			width: 196px;
			height: 196px;
			transform: translate(-60px, 0px) scale(1.9);
			background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42) 20%, rgb(254, 164, 104) 80%);
			border-radius: 50%;
			box-shadow: inset 10px -15px 50px rgb(255, 248, 147), inset -3px 8px 20px rgb(239, 221, 197);
		}

		.circle3 {
			position: absolute;
			width: 196px;
			height: 196px;
			background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
			border-radius: 50%;
			box-shadow: inset -5px 10px 30px rgb(255, 248, 147), inset 5px -15px 40px rgb(255, 206, 86);
			transform: scale(2.8);
		}

		.circle4 {
			position: absolute;
			width: 196px;
			height: 196px;
			background: radial-gradient(circle at 40% 50%, rgb(255, 73, 42), rgb(254, 164, 104));
			border-radius: 50%;
			box-shadow: inset -10px 15px 50px rgb(255, 248, 147);
			transform: scale(3.6);
		}

		.front-camera {
			position: absolute;
			top: 0;
			width: 50%;
			height: 32px;
			background: #111;
			border-radius: 0 0 18px 18px/15px;
		}

		.front-camera::before {
			position: absolute;
			left: 20%;
			bottom: 10px;
			width: 50%;
			height: 8px;
			background: #333;
			content: '';
			border-radius: 4px;
		}

		.front-camera::after {
			position: absolute;
			right: 20%;
			width: 10px;
			height: 10px;
			content: '';
			background: radial-gradient(#444 1px, rgb(0, 54, 161) 2px, rgb(14, 27, 29) 5px);
			bottom: 9px;
			border-radius: 50%;
		}

		/** 正面结束 */
		/** 左右两侧 */
		.side {
			position: absolute;
			width: 30px;
			height: 541px;
			background: rgb(37, 63, 76);
			transform-style: preserve-3d;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.side::before {
			position: absolute;
			top: 5px;
			width: 100%;
			height: 5px;
			background: rgb(117, 140, 154);
			content: '';
		}

		.side::after {
			position: absolute;
			bottom: 5px;
			width: 100%;
			height: 5px;
			background: rgb(117, 140, 154);
			content: '';
		}

		.left {
			position: absolute;
			transform: translateX(-155px) rotateY(-90deg);
		}

		.right {
			position: absolute;
			transform: translateX(155px) rotateY(90deg);
		}

		.slot {
			position: absolute;
			bottom: 60px;
			width: 9px;
			height: 70px;
			border: solid 1px #000;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.slot::before {
			position: absolute;
			bottom: 10px;
			width: 5px;
			height: 5px;
			content: '';
			background: #000;
			border-radius: 2px;
		}

		.switch {
			position: absolute;
			top: 80px;
			width: 8px;
			height: 50px;
			border-radius: 4px;
			background: rgb(37, 63, 76);
			box-shadow: 1px 1px 2px, -1px -1px 2px rgb(167, 190, 204);
		}

		.switch2 {
			position: absolute;
			top: 32px;
			width: 5px;
			height: 30px;
			border-radius: 4px;
			border: solid 1px rgb(117, 140, 154);
			border-left: 3px solid #111;
			background: rgb(37, 63, 76);
			box-shadow: 1px 1px 2px, -1px -1px 2px rgb(117, 140, 154);
		}

		.switch-extra {
			transform-style: preserve-3d;
			transform: translateZ(3px);
		}

		.switch-extra::before {
			position: absolute;
			left: 0;
			top: 5%;
			height: 90%;
			width: 3px;
			background: rgb(37, 63, 76);
			content: '';
			transform-origin: left center;
			transform: rotateY(90deg);
		}

		.switch-extra::after {
			position: absolute;
			left: 0;
			top: 2%;
			height: 96%;
			width: 3px;
			background: rgb(37, 63, 76);
			content: '';
			transform-origin: right center;
			transform: rotateY(-90deg);
		}

		/** 左右两侧结束 */
		/** 顶部 */
		.top {
			transform: translateY(-317px) rotateX(90deg);
		}

		.side2 {
			position: absolute;
			width: 215px;
			height: 30px;
			background: rgb(37, 63, 76);
			transform-style: preserve-3d;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bottom::before {
			position: absolute;
			left: 5px;
			width: 5px;
			height: 100%;
			background: rgb(117, 140, 154);
			content: '';
		}

		.top::after {
			position: absolute;
			right: 5px;
			width: 5px;
			height: 100%;
			background: rgb(117, 140, 154);
			content: '';
		}

		/** 顶部结束 */
		/** 底部 */
		.bottom {
			display: flex;
			justify-content: center;
			transform: translateY(317px) rotateX(-90deg);
		}

		.dot {
			width: 6px;
			height: 6px;
			background: #000;
			border-radius: 3px;
			margin-right: 3px;
			box-shadow: 1px 1px 1px #aaa;
		}

		.dot2 {
			margin-right: 10px;
		}

		/** 底部结束 */
		/** 圆角填充 圆角半径46px*/
		.pad-radius {
			position: absolute;
			width: 30px;
			height: 9px;
			background: rgb(37, 63, 76);
		}

		.pad-radius0 {
			transform: rotateY(-90deg) rotateX(0deg) translateZ(48px);
		}

		.pad-radius1 {
			transform: rotateY(-90deg) rotateX(10deg) translateZ(48px);
		}

		.pad-radius2 {
			transform: rotateY(-90deg) rotateX(20deg) translateZ(48px);
		}

		.pad-radius3 {
			transform: rotateY(-90deg) rotateX(30deg) translateZ(48px);
		}

		.pad-radius4 {
			transform: rotateY(-90deg) rotateX(40deg) translateZ(48px);
		}

		.pad-radius5 {
			transform: rotateY(-90deg) rotateX(50deg) translateZ(48px);
		}

		.pad-radius6 {
			transform: rotateY(-90deg) rotateX(60deg) translateZ(48px);
		}

		.pad-radius7 {
			transform: rotateY(-90deg) rotateX(70deg) translateZ(48px);
		}

		.pad-radius8 {
			transform: rotateY(-90deg) rotateX(80deg) translateZ(48px);
		}

		.pad-radius9 {
			transform: rotateY(-90deg) rotateX(90deg) translateZ(48px);
		}

		.lt-radius {
			position: absolute;
			width: 0;
			height: 0;
			transform-style: preserve-3d;
			transform: translate3d(-107px, -269px, 0);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.lt-radius.rt-radius {
			transform: translate3d(107px, -269px, 0) rotateZ(90deg);
		}

		.lt-radius.lb-radius {
			transform: translate3d(-107px, 269px, 0) rotateZ(-90deg);
		}

		.lt-radius.rb-radius {
			transform: translate3d(107px, 269px, 0) rotateZ(180deg);
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="box">
			<div class="back">
				<div class="camera-group">
					<div class="camera camera1"></div>
					<div class="camera camera2"></div>
					<div class="camera camera3"></div>
					<div class="camera4"></div>
					<div class="camera5"></div>
					<div class="camera6"></div>
				</div>
				<div class="logo-box">
					<div class="logo"></div>
				</div>
			</div>
			<div class="front">
				<div class="circle4"></div>
				<div class="circle3"></div>
				<div class="circle2"></div>
				<div class="circle1"></div>
				<div class="front-camera"></div>
			</div>
			<div class="left side">
				<div class="switch2 switch-extra"></div>
				<div class="switch switch-extra"></div>
				<div class="switch switch-extra" style="top: 140px;"></div>
				<div class="slot"></div>
			</div>
			<div class="right side">
				<div class="switch switch-extra" style="top: 120px;height: 70px;"></div>
			</div>
			<div class="top side2"></div>
			<div class="bottom side2">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot dot2"></div>
				<div class="dot"></div>
				<div class="dot" style="width: 36px;"></div>
				<div class="dot dot2"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="lt-radius">
				<div class="pad-radius0 pad-radius"></div>
				<div class="pad-radius1 pad-radius"></div>
				<div class="pad-radius2 pad-radius"></div>
				<div class="pad-radius3 pad-radius"></div>
				<div class="pad-radius4 pad-radius"></div>
				<div class="pad-radius5 pad-radius"></div>
				<div class="pad-radius6 pad-radius"></div>
				<div class="pad-radius7 pad-radius"></div>
				<div class="pad-radius8 pad-radius"></div>
				<div class="pad-radius9 pad-radius"></div>
			</div>
			<div class="lt-radius rt-radius">
				<div class="pad-radius0 pad-radius"></div>
				<div class="pad-radius1 pad-radius"></div>
				<div class="pad-radius2 pad-radius"></div>
				<div class="pad-radius3 pad-radius"></div>
				<div class="pad-radius4 pad-radius"></div>
				<div class="pad-radius5 pad-radius"></div>
				<div class="pad-radius6 pad-radius"></div>
				<div class="pad-radius7 pad-radius"></div>
				<div class="pad-radius8 pad-radius"></div>
				<div class="pad-radius9 pad-radius"></div>
			</div>
			<div class="lt-radius lb-radius">
				<div class="pad-radius0 pad-radius"></div>
				<div class="pad-radius1 pad-radius"></div>
				<div class="pad-radius2 pad-radius"></div>
				<div class="pad-radius3 pad-radius"></div>
				<div class="pad-radius4 pad-radius"></div>
				<div class="pad-radius5 pad-radius"></div>
				<div class="pad-radius6 pad-radius"></div>
				<div class="pad-radius7 pad-radius"></div>
				<div class="pad-radius8 pad-radius"></div>
				<div class="pad-radius9 pad-radius"></div>
			</div>
			<div class="lt-radius rb-radius">
				<div class="pad-radius0 pad-radius"></div>
				<div class="pad-radius1 pad-radius"></div>
				<div class="pad-radius2 pad-radius"></div>
				<div class="pad-radius3 pad-radius"></div>
				<div class="pad-radius4 pad-radius"></div>
				<div class="pad-radius5 pad-radius"></div>
				<div class="pad-radius6 pad-radius"></div>
				<div class="pad-radius7 pad-radius"></div>
				<div class="pad-radius8 pad-radius"></div>
				<div class="pad-radius9 pad-radius"></div>
			</div>
		</div>
	</div>
</body>

</html>